<template>
  <a-form
    ref="formRef"
    inline
    :model="formData"
    :rules="rules"
    v-bind="formItemLayout"
  >
    <a-row :gutter="24">
      <a-col :span="12">
        <a-form-item label="NVR厂商" name="manufacturer" required>
          <a-select
            v-model:value="formData.manufacturer"
            allow-clear
            placeholder="请选择NVR厂商"
            :options="selectList"
          />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="NVR名称" name="name" required>
          <a-input
            v-model:value="formData.name"
            placeholder="请输入NVR名称"
            maxLength="20"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :span="12">
        <a-form-item label="IP地址" name="ip" required>
          <a-input v-model:value="formData.ip" placeholder="请输入IP地址" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="端口" name="port" required>
          <a-input v-model:value="formData.port" placeholder="请输入端口" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :span="12">
        <a-form-item label="用户名" name="userName" required>
          <a-input
            v-model:value="formData.userName"
            placeholder="请输入用户名"
            maxLength="20"
          />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="密码" name="password" required>
          <a-input
            v-model:value="formData.password"
            placeholder="请输入密码"
            maxLength="20"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :span="24">
        <a-form-item label="备注" name="remark" :labelCol="{ span: 3 }">
          <a-textarea
            v-model:value="formData.remark"
            placeholder="请输入备注"
            maxLength="100"
          />
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script lang="ts" setup>
import { watchEffect, ref, reactive } from 'vue'
import type { Rule } from 'ant-design-vue/es/form'
import { validateIPv4Address, validatePort } from '@/utils/validate'

const formRef = ref()
const formData = reactive({
  id: '',
  manufacturer: undefined,
  name: '',
  ip: '',
  port: '',
  userName: '',
  password: '',
  remark: ''
})

const formItemLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 24 }
}

const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  },
  selectList: {
    type: Array,
    default: () => []
  },
  modalType: {
    type: String,
    default: 'add'
  }
})

const rules: Record<string, Rule[]> = {
  port: [
    {
      validator: validatePort,
      trigger: 'change'
    },
    {
      message: '请输入端口',
      trigger: 'change'
    }
  ],
  ip: [
    {
      validator: validateIPv4Address,
      trigger: 'change'
    },
    {
      message: '请输入IP地址',
      trigger: 'change'
    }
  ]
}

watchEffect(() => {
  if (props.modalType === 'edit') {
    console.log(props.data, 'edit')

    formData.id = props.data.id

    formData.manufacturer = props.data.manufacturer
    formData.name = props.data.name
    formData.ip = props.data.ip
    formData.port = props.data.port
    formData.userName = props.data.userName
    formData.password = props.data.password
    formData.remark = props.data.remark
  }
})

defineExpose({
  formData,
  formRef
})
</script>
